import React, { useState } from 'react';
import classNames from 'classnames';

interface DraggerProps {
    onFile?: (files: FileList) => void;
}

export const Dragger: React.FC<DraggerProps> =
    ({
        onFile, children
    }) => {
        const [dragOver, setDragOver] = useState(false);
        const clazz = classNames('wave-uploader-dragger', {
            'is-dragover': dragOver
        });
        const handleDrag = (e: React.DragEvent<HTMLDivElement>, over: boolean) => {
            e.preventDefault();
            // console.log("handleDrag 11111111111111111");
            
            setDragOver(over);
        }
        const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
            e.preventDefault();
            setDragOver(false);
            onFile && onFile(e.dataTransfer.files);
            // console.log("handleDrop 2222222222222222");
        }
        return (
            <div className={clazz}
                onDragOver={e => handleDrag(e, true)}
                onDragLeave={e => handleDrag(e, false)}
                onDrop={e => handleDrop(e)}
            >
                {children}
            </div>
        )
    }